@config.main("Reference") {
    @config.mainBox("Reference") {

        <table class="table table-hover" id="table" data-pagination="true" data-advanced-sortable="true"
        data-page-list="[10]">
        </table>


        <script src="@routes.Assets.versioned("config/genomeTable.js")" type="text/javascript"></script>


        <script>
                $(function () {

                    const refHead = {
                        "title": {"title": "Title", "searchType": "text", "formatter": "GetTitle"},
                        "date": {"title": "Year", "searchType": "text", "formatter": ""},
                        "doi": {"title": "DOI", "searchType": "text", "formatter": "GetDoi"},
                        "pubmed": {"title": "Pubmed ID", "searchType": "text", "formatter": "GetPubmedId"}
                    };

                    const columns =  getTableColumns(refHead,"table")

                    $.post("@routes.RefController.getAllRefInfo()", (data) => {

                        $("#table").bootstrapTable({
                            data: data,
                            detailView: true,
                            detailFormatter:detailFormatter,
                            onAll:function(){
                                $('[data-toggle="popover"]').popover()

                            },
                            columns:  columns
                        })
                        $('[data-toggle="popover"]').popover()

                    })
                })
                
                function GetTitle(value,row) {
                    return `  <a data-toggle="popover" title="Title"  data-placement="bottom" data-content="${value}" data-trigger="hover"
                                href="/hordeum/ref/openRefPdf?id=${row.id}&name=${value}" target="_blank">
                                <div style="width: 500px;overflow:hidden;text-overflow:ellipsis; ">${value}</div>
                                </a>`
                }

                function GetDoi(value,rows) {
                    return `<a href="https://doi.org/${value}" target="_blank">${value}</a>`
                }

                function GetPubmedId(value,rows) {
                    return `<a href="https://pubmed.ncbi.nlm.nih.gov/${value}" target="_blank">${value}</a>`
                }



                function detailFormatter(index, row) {
                    return `
                        <table class="table table-hover">
                        <tbody>
                        <tr><th>Title</th><td style="white-space: normal">${row.title}</td></tr>
                        <tr><th>Year</th><td>${row.date}</td></tr>
                        <tr><th>Author</th><td>${row.author}</td></tr>
                        <tr><th>DOI</th><td><a href="https://doi.org/${row.doi}" target="_blank">doi: ${row.doi}</a></td></tr>
                        <tr><th>Pubmed ID</th><td><a href="https://pubmed.ncbi.nlm.nih.gov/${row.pubmed}" target="_blank">${row.pubmed}</a></td></tr>
                        <tr><th>Abstract</th><td style="white-space: normal">${row.abstract}</td></tr>
                        </tbody>
                    </table>
                    `
                }

        </script>


    }
}